<template>
  <div>
    <el-breadcrumb separator="/" class="breadcrumb">
      <el-breadcrumb-item :to="{ path: '/bank/personalBank' }">我的题库</el-breadcrumb-item>
    </el-breadcrumb>
    <div class="subjectTitle">
      <el-collapse style="margin-left: 5%;" v-model="activeNames">
        <el-collapse-item title="筛选题库" name="1">
          <div class="check-box" @change="handleChange">学院：
            <el-radio-group v-model="searchForm.house">
              <el-radio v-for="item in houses"
                        :key="item"
                        :label="item">{{item}}</el-radio>
            </el-radio-group>
          </div>
          <div class="check-box" v-if="searchForm.house !== null">科目：
            <el-radio-group v-model="searchForm.subjectId">
              <el-radio v-for="item in subjects"
                        :key="item.id"
                        :label="item.id">{{item.name}}</el-radio>
            </el-radio-group>
          </div>
          <div class="check-box">状态：
            <el-radio-group v-model="searchForm.status">
              <el-radio v-for="item in allStatus"
                        :key="item.value"
                        :label="item.value">{{item.name}}</el-radio>
            </el-radio-group>
          </div>
          <el-link type="info" @click="clearSearch">清空</el-link>
        </el-collapse-item>
      </el-collapse>
      <el-button type="primary" style="margin-left: 5%; height: 50px" @click="search">搜索题库</el-button>
      <el-button type="primary" style="margin-left: 5%; height: 50px" @click="subjectDialogVisible = true">添加科目</el-button>
      <el-button type="primary" style="margin-left: 5%; margin-right: 5%; height: 50px" @click="knowledgePointDialogVisible = true">加知识点</el-button>
    </div>
    <div style="width: 90%; margin-left: 5%; margin-top: 10px;">
      <el-table
        :data="bankList"
        style="width: 100%">
        <el-table-column
          prop="name"
          label="名称">
        </el-table-column>
        <el-table-column
          prop="subject"
          label="科目"
          width="130">
        </el-table-column>
        <el-table-column
          label="题库状态"
          width="130">
          <template slot-scope="scope">
            <span>{{transferStatus(scope.row.status)}}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="创建时间"
          prop="createTime"
          width="180">
        </el-table-column>
        <el-table-column
          label="更新时间"
          prop="updateTime"
          width="180">
        </el-table-column>
        <el-table-column
          label="操作"
          width="180">
          <template slot-scope="scope" style="display: grid; grid-template-columns: 33% 33% 33%">
            <el-link type="info" @click="goToQuestion(scope.row.id, scope.row.name, scope.row.subject, scope.row.status)">进入题库</el-link>
          </template>
        </el-table-column>
      </el-table>
      <div class="block">
        <el-pagination
          layout="total, prev, pager, next"
          :page-size="pagination.page_size"
          :current-page="pagination.index"
          :total="pagination.total"
          @current-change="changePage">
        </el-pagination>
      </div>
    </div>
    <!--  增加科目  -->
    <el-dialog
      title="提示"
      :visible.sync="subjectDialogVisible"
      width="30%"
      center>
      <el-select v-model="house" placeholder="请选择" @change="findSubjectsByHouse(house)" style="width: 100%;">
        <el-option
          v-for="item in houses"
          :key="item"
          :label="item"
          :value="item">
        </el-option>
      </el-select>
      <div v-if="house !== ''">
        <el-tag
          :key="subject.id"
          v-for="subject in subjects"
          closable
          :disable-transitions="false"
          @close="handleSubjectClose(subject.id)">
          {{subject.name}}
        </el-tag>
        <el-input
          class="input-new-tag"
          v-if="subjectInputVisible"
          v-model="subjectInputValue"
          ref="saveTagInput"
          size="small"
          @keyup.enter.native="handleSubjectInputConfirm"
          @blur="handleSubjectInputConfirm"
        >
        </el-input>
        <el-button v-else class="button-new-tag" size="small" @click="showSubjectInput">+ New Tag</el-button>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="subjectDialogVisible = false">完 成</el-button>
      </span>
    </el-dialog>

    <!--  增加知识点  -->
    <el-dialog
      title="提示"
      :visible.sync="knowledgePointDialogVisible"
      width="30%"
      center>
      <el-select v-model="house" placeholder="请选择" @change="findSubjectsByHouse(house)" style="width: 100%;">
        <el-option
          v-for="item in houses"
          :key="item"
          :label="item"
          :value="item">
        </el-option>
      </el-select>
      <el-select v-model="subjectId" v-if="house !== ''" placeholder="请选择" @change="getKnowledgePoints(subjectId)" style="width: 100%;margin-top: 10px">
        <el-option
          v-for="item in subjects"
          :key="item.id"
          :label="item.name"
          :value="item.id">
        </el-option>
      </el-select>
      <div v-if="subjectId !== 0">
        <el-tag
          :key="klgPoint.id"
          v-for="klgPoint in klgPoints"
          closable
          :disable-transitions="false"
          @close="handleClose(klgPoint.id)">
          {{klgPoint.name}}
        </el-tag>
        <el-input
          class="input-new-tag"
          v-if="inputVisible"
          v-model="inputValue"
          ref="saveTagInput"
          size="small"
          @keyup.enter.native="handleInputConfirm"
          @blur="handleInputConfirm"
        >
        </el-input>
        <el-button v-else class="button-new-tag" size="small" @click="showInput">+ New Tag</el-button>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="knowledgePointDialogVisible = false">完 成</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { findSubjectsByHouse } from '../../../api/questionBank.js'
import {
  addKnowledgePoint,
  addSubject, deleteKnowledgePointByID,
  deleteSubjectByID,
  getKnowledgePoints,
  librarySearch,
  librarySearchAll
} from '../../../api/adminManage'

export default {
  name: 'QuestionBankManage',
  data () {
    return {
      // 分页信息
      pagination: {
        page_size: 5,
        index: 1,
        total: 100
      },
      // 筛选条件
      activeNames: [],
      searchForm: {
        subjectId: null,
        status: null,
        house: null
      },
      houses: [
        '计算机学院',
        '测绘学院',
        '文学院'
      ],
      allStatus: [
        {
          value: 0,
          name: '未发布'
        },
        {
          value: 1,
          name: '待审核'
        },
        {
          value: 2,
          name: '已审核'
        }
      ],
      // 增加题库
      addDialogVisible: false,
      bankAdd: {
        name: '',
        subjectId: '',
        status: 0,
        createTime: '',
        updateTime: '',
        teacherId: 0
      },
      subjects: [],
      // 表格显示
      bankList: [
        {
          id: 1,
          name: '2022计算机网络练习题',
          subject: '计算机网络',
          status: 0,
          createTime: '2022-3-12 12:00:00',
          updateTime: '2022-3-14 12:00:00'
        },
        {
          id: 2,
          name: '2022计算机网络期末复习题',
          subject: '计算机网络',
          status: 1,
          createTime: '2022-3-12 12:00:00',
          updateTime: '2022-3-14 12:00:00'
        },
        {
          id: 3,
          name: '2022计算机网络期末复习题',
          subject: '计算机网络',
          status: 2,
          createTime: '2022-3-12 12:00:00',
          updateTime: '2022-3-14 12:00:00'
        }
      ],
      house: '',
      subject: '',
      subjectId: 0,
      // 增加subject
      subjectDialogVisible: false,
      subjectInputVisible: false,
      subjectInputValue: '',
      // 增加知识点
      knowledgePointDialogVisible: false,
      inputVisible: false,
      inputValue: '',
      klgPoints: []
    }
  },
  mounted () {
    this.getBanks()
  },
  methods: {
    // 获取该老师的全部题库
    getBanks () {
      let parameters = {
        index: this.pagination.index - 1,
        page_size: this.pagination.page_size
      }
      librarySearchAll(parameters).then(res => {
        if (res.data.errorCode === 0) {
          console.log(res.data)
          this.bankList = res.data.data.list
          this.pagination.total = res.data.data.total
        } else {
          this.$message.error(res.data.message)
        }
      })
    },
    // 翻页
    changePage (val) {
      this.pagination.index = val
      this.getBanks()
    },
    transferStatus (status) {
      switch (status) {
        case 0: return '未发布'
        case 1: return '待审核'
        case 2: return '已审核'
        default: return '错误'
      }
    },
    // 前往题库中的题目页面
    goToQuestion (id, name, subject, status) {
      console.log(id)
      this.$router.push({path: '/admin/questionManage', query: {id: id, name: name, subject: subject, status: status}})
    },
    // 更改选择学院
    handleChange () {
      this.findSubjectsByHouse(this.searchForm.house)
    },
    // 获取科目
    findSubjectsByHouse (house) {
      findSubjectsByHouse(house).then(res => {
        console.log(res.data)
        if (res.data.errorCode === 0) {
          this.subjects = res.data.data
        } else {
          this.$message.error(res.data.message)
          this.subjects = []
        }
      })
    },
    // 获取知识点
    getKnowledgePoints (subjectId) {
      getKnowledgePoints(subjectId).then(res => {
        console.log(res.data)
        if (res.data.errorCode === 0) {
          this.klgPoints = res.data.data
        } else {
          this.$message.error(res.data.message)
        }
      })
    },
    // 搜索
    clearSearch () {
      this.searchForm = {
        subjectId: null,
        status: null
      }
      this.getBanks()
    },
    search () {
      this.pagination = {
        page_size: 5,
        index: 1,
        total: 100
      }
      let parameter = {
        page_size: this.pagination.page_size,
        index: this.pagination.index - 1,
        subjectId: this.searchForm.subjectId,
        status: this.searchForm.status
      }
      librarySearch(parameter).then(res => {
        if (res.data.errorCode === 0) {
          console.log(res.data)
          this.bankList = res.data.data.list
          this.pagination.total = res.data.data.total
        } else {
          this.$message.error(res.data.message)
        }
      })
    },
    // 增加subject
    showSubjectInput () {
      this.subjectInputVisible = true
      this.$nextTick(_ => {
        this.$refs.saveTagInput.$refs.input.focus()
      })
    },
    handleSubjectInputConfirm () {
      let that = this
      let subject = {
        name: this.subjectInputValue,
        house: this.house
      }
      addSubject(subject).then(res => {
        console.log(res)
        if (res.data.errorCode === 0) {
          that.$message({
            message: '增加科目成功！',
            type: 'success'
          })
          this.subjectInputVisible = false
          this.subjectInputValue = ''
          this.findSubjectsByHouse(this.house)
        } else {
          that.$message.error(res.data.message)
        }
      })
    },
    handleSubjectClose (id) {
      let that = this
      deleteSubjectByID(id).then(res => {
        console.log(res)
        if (res.data.errorCode === 0) {
          that.$message({
            message: '删除科目成功！',
            type: 'success'
          })
          this.findSubjectsByHouse(this.house)
        } else {
          that.$message.error(res.data.message)
        }
      })
    },
    showInput () {
      this.inputVisible = true
      this.$nextTick(_ => {
        this.$refs.saveTagInput.$refs.input.focus()
      })
    },
    // 知识点
    handleInputConfirm () {
      let that = this
      let newKnowledgePoint = {
        name: this.inputValue,
        subjectId: this.subjectId
      }
      addKnowledgePoint(newKnowledgePoint).then(res => {
        console.log(res)
        if (res.data.errorCode === 0) {
          that.$message({
            message: '增加知识点成功！',
            type: 'success'
          })
          this.inputVisible = false
          this.inputValue = ''
          this.getKnowledgePoints(this.subjectId)
        } else {
          that.$message.error(res.data.message)
        }
      })
    },
    handleClose (id) {
      let that = this
      deleteKnowledgePointByID(id).then(res => {
        console.log(res)
        if (res.data.errorCode === 0) {
          that.$message({
            message: '删除知识点成功！',
            type: 'success'
          })
          this.getKnowledgePoints(this.subjectId)
        } else {
          that.$message.error(res.data.message)
        }
      })
    }
  }
}
</script>

<style scoped>
  .breadcrumb {
    padding: 20px;
  }

  .subjectTitle {
    font-size: 16px;
    font-weight: bold;
    margin: 0;
    display: grid;
    grid-template-columns: 70% 10% 10% 10%;
  }

  .check-box {
    margin-bottom: 5px;
    text-align: left;
  }

  /* 标签 */
  .el-tag + .el-tag {
    margin-top: 10px;
    margin-left: 10px;
  }
  .button-new-tag {
    margin-top: 10px;
    margin-left: 10px;
    height: 32px;
    line-height: 30px;
    padding-top: 0;
    padding-bottom: 0;
  }
  .input-new-tag {
    width: 90px;
    margin-top: 10px;
    margin-left: 10px;
    vertical-align: bottom;
  }
</style>
